<template>
    <div class="course">
        <template v-for="(item, index) in list">
            <div class="course-list":key="index" v-if="index === 0" @click="courseDetail(item)">
                <div class="video-box">
                    <img :src="item.cover">
                    <van-icon name="play-circle" @click.stop="play(item.videos)"/>
                </div>
            </div>
        </template>

        <div class="more">
            <i></i>
            更多指引
        </div>

        <template v-for="(item, index) in list">
            <div class="course-list":key="index" v-if="index !== 0" @click="courseDetail(item)">
                <div class="course-item">
                    <div class="video-box" v-if="item.type === 0">
                        <img :src="item.cover">
                        <van-icon name="play-circle" @click.stop="play(item.videos)"/>
                    </div>
                    <div class="img-box" v-else>
                        <img v-lazy="item.cover" />
                    </div>
                    <p>{{ item.title }}</p>
                </div>
            </div>
        </template>
        <van-popup v-model="visible" closeable class="video-popup" position="bottom" get-container="body" :style="{ height: '94%' }" v-if="visible">
            <div class="main">
                <video ref="video" :src="videos" autoplay controls></video>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import { Popup } from 'vant'
	export default {
		name: 'course-list',
        components: {
			'van-popup': Popup
        },
        data() {
			return {
				list: [],
				visible: false,
				videos: null
            }
        },
        created() {
			this.getCourseList()
        },
        methods: {
			play(url) {
				this.videos = url;
				this.visible = true;
				setTimeout(() => {
					this.$refs.video.play();
				}, 2000);
            },
			getCourseList() {
				let params  = {
					app: 'yzf',
					order: 'level',
					sort: 'asc'
                };
				this.$service.common.introduction.list(params).then(res => {
					this.list = res

                    this.list.forEach(item => {
                    	if (item.images) {
							item.images = item.images.split(',')
                        }
                    })
                })
            },
			courseDetail(item) {
				if (item.images) {
					this.$router.push({
						path: '/course-detail',
						query: {
							id: item.id
						}
					})
                } else {
					this.videos = item.videos;
					this.visible = true;
                }
            }
        }
	};
</script>

<style lang="scss" scoped>
    .course {
        background: #F6F7FA;
        padding: 20px;
        padding-bottom: 140px;
        .more {
            font-size: 32px;
            color: #221D2C;
            margin-top: 40px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            i {
                width: 8px;
                background: #221D2C;
                border-radius: 50px;
                height: 40px;
                display: block;
                margin-right: 30px;
            }
        }
        .course-list {
            border-radius: 16px;
            overflow: hidden;
            .video-box {
                width: 100%;
                height: 324px;
                position: relative;
                @include flexBox(center, center);
                img {
                    /*max-height: 100%;*/
                    width: 100%;
                }
                video {
                    height: 100%;
                }
                i {
                    font-size: 70px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -30px;
                    margin-top: -30px;
                    opacity: 0.4;
                    background: #fff;
                    border-radius: 50px;
                }
            }
            .course-item {
                width: 100%;
                height: 352px;
                background: #fff;
                border-radius: 16px;
                overflow: hidden;
                margin-bottom: 40px;
                .video-box {
                    height: 280px;
                }
                .img-box {
                    height: 280px;
                    width: 100%;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    img {
                        width: 100%;
                    }
                }
                p {
                    padding-left: 20px;
                    font-size: 28px;
                    color: #221D2C;
                    line-height: 72px;
                }
            }
        }
    }
    .video-popup {
        .main {
            width: 100%;
            height: 100%;
            @include flexBox(center, center);
            video {
                height: 86%;
            }
        }
    }
</style>